<template>
  <div class="member-management">
    <ReCommonTable
      ref="tableRef"
      title="项目管理"
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :search-fields="searchFields"
      :pagination="pagination"
      @search="handleSearch"
      @refresh="handleRefresh"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPageChange"
      @selection-change="handleSelectionChange"
    >
      <!-- 添加按钮 -->
      <template #toolbar-add>
        <el-button
          type="primary"
          size="small"
          :icon="CirclePlus"
          @click="handleAdd"
          >添加项目
        </el-button>
      </template>
      <template #bpicurl="{ row }">
        <el-image
          v-if="row.p_pic"
          :src="row.p_pic"
          fit="cover"
          class="image-slot cursor-pointer"
          style="height: 50px"
          :preview-src-list="[row.p_pic]"
          :initial-index="0"
          preview-teleported
        >
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
        <span v-else class="text-gray-400">暂无图片</span>
      </template>
      <template #pimg="{ row }">
        <el-image
          v-if="row.p_img"
          :src="row.p_img"
          fit="cover"
          class="image-slot cursor-pointer"
          style="width: 80px; height: 60px"
          :preview-src-list="[row.p_img]"
          :initial-index="0"
          preview-teleported
        >
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
        <span v-else class="text-gray-400">暂无图片</span>
      </template>
      <template #phpic="{ row }">
        <el-image
          v-if="row.p_hpic"
          :src="row.p_hpic"
          fit="cover"
          class="image-slot cursor-pointer"
          style="width: 80px; height: 60px"
          :preview-src-list="[row.p_hpic]"
          :initial-index="0"
          preview-teleported
        >
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
        <span v-else class="text-gray-400">暂无图片</span>
      </template>
      <template #pstatus="{ row }">
        <el-switch
          v-model="row.p_status"
          active-value="1"
          inactive-value="-1"
          inline-prompt
          active-text="上架"
          inactive-text="下架"
          size="small"
          :loading="row._switchLoading"
          @click="handleSwitchChange(row)"
        />
      </template>
      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button size="small" @click="handleView(row)"> 查看</el-button>
        <el-button size="small" @click="handleEdit(row)"> 编辑</el-button>
      </template>

      <!-- 新增按钮 -->
      <template #toolbar>
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <Plus />
          </el-icon>
          新增项目
        </el-button>
      </template>
    </ReCommonTable>

    <!-- 项目查看抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="项目详情"
      :size="450"
      :close-on-click-modal="false"
      class="project-drawer"
    >
      <div v-if="currentProject">
        <div class="block text-center">
          <el-carousel height="auto" motion-blur autoplay>
            <el-carousel-item style="height: auto; width: 100%">
              <el-image
                style="width: 100%; height: auto"
                :src="currentProject.p_pic"
              />
            </el-carousel-item>
            <el-carousel-item
              v-if="currentProject.p_hpic"
              style="height: auto; width: 100%"
            >
              <el-image
                style="width: 100%; height: auto"
                :src="currentProject.p_hpic"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="w-full relative -mt-5 z-[1] bg-white rounded-2xl p-4">
          <div class="flex flex-row items-baseline content-end gap-2">
            <span class="text-2xl text-[#ff0000] font-bold"
              >￥{{ currentProject.p_price }}</span
            ><small class="text-lg"
              >会员价：{{ currentProject.p_vipprice }}</small
            >
          </div>
          <div class="py-2 text-lg font-bold text-black">
            {{ currentProject.p_name }}
          </div>
          <div class="py-0 text-base font-bold text-black">
            服务时长：{{ currentProject.p_duration }}分钟
          </div>
          <div class="flex flex-row flex-wrap gap-2 py-2">
            <el-tag
              v-for="(tag, index) in currentProject.p_tags.split(',')"
              :key="index"
              type="warning"
              effect="light"
              round
            >
              {{ tag || "未填写" }}
            </el-tag>
          </div>
          <div
            class="flex flex-row justify-between gap-2 py-1 text-sm text-gray-500"
          >
            <span>项目ID：{{ currentProject.p_id }}</span
            ><span
              >项目状态：{{
                currentProject.p_status == 1 ? "上架" : "下架"
              }}</span
            >
          </div>
          <div
            class="flex flex-row justify-between gap-2 py-1 text-xs text-gray-500"
          >
            <span>创建时间：{{ formatTimestamp(currentProject.p_ctime) }}</span
            ><span
              >编辑时间：{{ formatTimestamp(currentProject.p_etime) }}</span
            >
          </div>
          <div><img class="w-full h-auto" src="/xiangq.jpg" /></div>
          <div v-if="currentProject.p_img">
            <el-image
              class="w-full h-auto"
              :src="currentProject.p_img"
              fit="cover"
            >
              <template #placeholder>
                <div class="image-slot">
                  Loading<span class="dot">...</span>
                </div>
              </template>
            </el-image>
          </div>
          <div class="w-full">{{ currentProject.p_info || "暂无详情" }}</div>
        </div>
      </div>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="drawerVisible = false">关闭</el-button>
          <el-button type="primary" @click="switchToEdit">
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 项目编辑/新增弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      :close-on-click-modal="false"
      center
      align-center
    >
      <!-- 编辑/新增表单 -->
      <div class="banner-form-container">
        <el-form
          ref="projectFormRef"
          :model="projectForm"
          :rules="bannerRules"
          label-width="auto"
        >
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="projectForm.name" placeholder="请输入项目名称" />
          </el-form-item>

          <el-form-item label="项目价格" prop="price">
            <el-input
              v-model="projectForm.price"
              placeholder="请输入项目价格"
            />
          </el-form-item>
          <el-form-item label="会员价格" prop="vipprice">
            <el-input
              v-model="projectForm.vipprice"
              placeholder="请输入会员价格"
            />
          </el-form-item>
          <el-form-item label="服务时长" prop="duration">
            <el-input
              v-model="projectForm.duration"
              placeholder="请输入服务时长（分钟）"
            />
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-select v-model="projectForm.status" placeholder="请选择状态">
              <el-option label="上架" value="1" />
              <el-option label="下架" value="-1" />
            </el-select>
          </el-form-item>

          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="projectForm.sort"
              :min="0"
              :max="999"
              placeholder="请输入排序值"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="Banner图片" prop="img_url">
            <!-- 上传按钮 -->
            <el-upload
              :on-change="handleBannerChange"
              :show-file-list="false"
              action="#"
              class="avatar-uploader"
            >
              <img
                v-if="imagePreview"
                :src="imagePreview"
                alt=""
                class="avatar object-cover"
              />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="详情页内容图" prop="main_url">
            <!-- 上传按钮 -->
            <el-upload
              :on-change="handleDetailImageChange"
              :show-file-list="false"
              action="#"
              class="avatar-uploader"
            >
              <img
                v-if="detailImagePreview"
                :src="detailImagePreview"
                alt=""
                class="avatar object-cover"
              />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="详情页头图" prop="head_url">
            <!-- 上传按钮 -->
            <el-upload
              :on-change="handleHeaderImageChange"
              :show-file-list="false"
              action="#"
              class="avatar-uploader"
            >
              <img
                v-if="headerImagePreview"
                :src="headerImagePreview"
                alt=""
                class="avatar object-cover"
              />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="项目标签" prop="tags">
            <el-input
              v-model="projectForm.tags"
              placeholder="请输入项目标签（逗号分隔）"
            />
          </el-form-item>
          <el-form-item label="项目详情" prop="info">
            <el-input
              v-model="projectForm.info"
              type="textarea"
              placeholder="请输入项目详情（可选）"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="submitLoading"
            @click="handleSubmit"
          >
            <el-icon>
              <Check />
            </el-icon>
            {{ dialogMode === "add" ? "新增" : "保存" }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import {
  Plus,
  Picture,
  Link,
  Sort,
  Calendar,
  EditPen,
  Edit,
  Check,
  Close,
  Delete,
  UploadFilled,
  CirclePlus
} from "@element-plus/icons-vue";
import { ReCommonTable } from "@/components/ReCommonTable";
import type {
  SearchField,
  TableColumn
} from "@/components/ReCommonTable/src/index.vue";
import {
  getProjectList,
  addProject,
  editProject,
  switchProjectStatus,
  fileUpload,
  type Project,
  type ProjectListParams,
  type AddProjectParams,
  type EditProjectParams
} from "@/api/project";

defineOptions({
  name: "ProjectList"
});

// 响应式数据
const loading = ref(false);
const dialogVisible = ref(false);
const drawerVisible = ref(false);
const submitLoading = ref(false);
const tableRef = ref();
const projectFormRef = ref();
const selectedRows = ref([]);
const currentProject = ref<Project | null>(null);

// 弹窗模式：view-查看，edit-编辑，add-新增
const dialogMode = ref<"view" | "edit" | "add">("view");

// 弹窗标题
const dialogTitle = computed(() => {
  switch (dialogMode.value) {
    case "view":
      return "项目详情";
    case "edit":
      return "编辑项目";
    case "add":
      return "新增项目";
    default:
      return "项目管理";
  }
});

// 项目表单数据
const projectForm = ref<AddProjectParams>({
  name: "",
  duration: "",
  vipprice: "",
  tags: "",
  info: "",
  price: "",
  img_url: "",
  main_url: "",
  head_url: "",
  status: "1",
  sort: "0"
});

// 图片预览
const imagePreview = ref("");
const detailImagePreview = ref("");
const headerImagePreview = ref("");

// 搜索表单
const searchForm = ref<ProjectListParams>({});

// 表单验证规则
const bannerRules = computed(() => ({
  name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  duration: [{ required: true, message: "请输入时长", trigger: "blur" }],
  vipprice: [{ required: true, message: "请输入会员价格", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
  sort: [{ required: true, message: "请输入排序值", trigger: "blur" }],
  tags: [{ required: true, message: "请输入项目标签", trigger: "blur" }],
  //info: [{ required: false, message: "请输入项目详情", trigger: "blur" }],
  img_url: [
    {
      required: dialogMode.value === "add",
      message: "请上传项目图片",
      trigger: "change"
    }
  ]
}));

// 表格数据
const tableData = ref([]);

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: "total, sizes, prev, pager, next, jumper",
  background: true,
  disabled: false,
  paginationSize: "default"
});

// 搜索字段配置（根据API文档）
const searchFields: SearchField[] = [
  {
    prop: "name",
    label: "关键字",
    type: "input",
    placeholder: "请输入项目名称"
  },
  {
    prop: "status",
    label: "项目状态",
    type: "select",
    options: [
      { label: "全部", value: "" },
      { label: "上架", value: "1" },
      { label: "下架", value: "-1" }
    ],
    placeholder: "请选择项目状态"
  }
];

// 表格列配置（根据API文档字段）
const columns: TableColumn[] = [
  {
    prop: "p_id",
    label: "项目ID",
    width: 70,
    fixed: "left"
  },
  {
    prop: "p_name",
    label: "项目名称",
    showOverflowTooltip: true
  },
  {
    prop: "p_pic",
    label: "Banner图片",
    width: 150,
    slot: "bpicurl"
  },
  /* {
    prop: "p_img",
    label: "详情页内容图",
    width: 100,
    slot: "pimg"
  },
  {
    prop: "p_hpic",
    label: "详情页头图",
    width: 100,
    slot: "phpic"
  }, */
  {
    prop: "p_price",
    label: "项目价格",
    width: 90
  },
  {
    prop: "p_vipprice",
    label: "会员价格",
    width: 90
  },
  {
    prop: "p_duration",
    label: "服务时长",
    width: 90,
    formatter: row => `${row.p_duration} 分钟`
  },
  {
    prop: "p_status",
    label: "项目状态",
    width: 90,
    slot: "pstatus"
    /*formatter: row => {
      const statusMap = {
        1: "上架"
      };
      return statusMap[row.p_status] || "下架";
    } */
  },
  {
    prop: "p_sort",
    label: "排序",
    width: 80,
    sortable: true
  },
  {
    prop: "p_ctime",
    label: "创建时间",
    width: 120,
    formatter: row => formatTimestamp(row.p_ctime)
  },
  {
    prop: "p_etime",
    label: "编辑时间",
    width: 120,
    formatter: row => formatTimestamp(row.p_etime)
  },
  {
    label: "操作",
    width: 140,
    fixed: "right",
    slot: "action"
  }
];

// 格式化时间戳
const formatTimestamp = (timestamp: string) => {
  if (!timestamp || timestamp === "0") return "";
  const date = new Date(parseInt(timestamp) * 1000);
  return date.toLocaleString("zh-CN", {
    // year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
};

// 事件处理
const handleSearch = (searchParams: any) => {
  console.log("搜索参数:", searchParams);
  searchForm.value = searchParams;
  pagination.current = 1;
  loadData();
};

const handleRefresh = () => {
  loadData();
};

const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.current = 1;
  loadData();
};

const handleCurrentPageChange = (current: number) => {
  pagination.current = current;
  loadData();
};

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection;
};

const handleView = (row: any) => {
  currentProject.value = row;
  drawerVisible.value = true;
};

const handleEdit = (row: any) => {
  currentProject.value = row;
  dialogMode.value = "edit";

  // 填充表单数据
  projectForm.value = {
    name: row.p_name,
    price: row.p_price,
    vipprice: row.p_vipprice,
    duration: row.p_duration,
    status: row.p_status,
    tags: row.p_tags,
    info: row.p_info,
    sort: row.p_sort,
    img_url: row.p_pic, // 编辑时不需要重新上传图片，除非用户选择更换
    main_url: row.p_img || "", // 表单使用main_url，但从表格的p_img字段获取值
    head_url: row.p_hpic || "" // 表单使用head_url，但从表格的p_hpic字段获取值
  };

  // 设置图片预览
  imagePreview.value = row.p_pic;
  detailImagePreview.value = row.p_img || "";
  headerImagePreview.value = row.p_hpic || "";

  dialogVisible.value = true;
};

const handleAdd = () => {
  currentProject.value = null;
  dialogMode.value = "add";

  // 重置表单
  projectForm.value = {
    name: "",
    price: "",
    duration: "",
    vipprice: "",
    tags: "",
    info: "",
    sort: "0",
    status: "1",
    img_url: "",
    main_url: "",
    head_url: ""
  };

  // 清空图片预览
  imagePreview.value = "";
  detailImagePreview.value = "";
  headerImagePreview.value = "";

  dialogVisible.value = true;
};

const switchToEdit = () => {
  if (currentProject.value) {
    drawerVisible.value = false; // 关闭抽屉
    handleEdit(currentProject.value);
  }
};
// 处理项目Banner图片上传
const handleBannerChange = async (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.raw); // 先读取文件内容
  const response = await fileUpload(file.raw);
  if (response.code === 1) {
    projectForm.value.img_url = response.data.url; // 返回的URL在data.url中
    imagePreview.value = response.data.url; // 设置预览图片
    ElMessage.success("Banner图片上传成功");
  } else {
    ElMessage.error(response.msg || "Banner图片上传失败");
    return;
  }
};

// 处理详情页内容图上传
const handleDetailImageChange = async (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.raw); // 先读取文件内容
  const response = await fileUpload(file.raw);
  if (response.code === 1) {
    projectForm.value.main_url = response.data.url; // 返回的URL在data.url中
    detailImagePreview.value = response.data.url; // 设置预览图片
    ElMessage.success("详情页内容图上传成功");
  } else {
    ElMessage.error(response.msg || "详情页内容图上传失败");
    return;
  }
};

// 处理详情页头图上传
const handleHeaderImageChange = async (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.raw); // 先读取文件内容
  const response = await fileUpload(file.raw);
  if (response.code === 1) {
    projectForm.value.head_url = response.data.url; // 返回的URL在data.url中
    headerImagePreview.value = response.data.url; // 设置预览图片
    ElMessage.success("详情页头图上传成功");
  } else {
    ElMessage.error(response.msg || "详情页头图上传失败");
    return;
  }
};

/* const handleBannerChange = async (file: File) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    const base64 = e.target?.result as string;
    projectForm.value.img_url = base64;
    imagePreview.value = base64;
  };
  reader.readAsDataURL(file.raw);
}; */

const removeImage = () => {
  projectForm.value.img_url = "";
  imagePreview.value = "";
};

const removeDetailImage = () => {
  projectForm.value.main_url = "";
  detailImagePreview.value = "";
};

const removeHeaderImage = () => {
  projectForm.value.head_url = "";
  headerImagePreview.value = "";
};

// 表单提交
const handleSubmit = async () => {
  if (!projectFormRef.value) return;

  try {
    await projectFormRef.value.validate();
    submitLoading.value = true;

    if (dialogMode.value === "add") {
      // 新增项目
      const response = await addProject(projectForm.value);
      if (response.code === 1) {
        ElMessage.success(response.msg || "新增成功");
        dialogVisible.value = false;
        loadData();
      } else {
        ElMessage.error(response.msg || "新增失败");
      }
    } else if (dialogMode.value === "edit" && currentProject.value) {
      // 编辑项目
      const editParams: EditProjectParams = {
        id: currentProject.value.p_id,
        name: projectForm.value.name,
        price: projectForm.value.price,
        img_url: projectForm.value.img_url || "", // 如果没有重新上传图片，传空字符串
        main_url: projectForm.value.main_url || "",
        head_url: projectForm.value.head_url || "",
        status: projectForm.value.status,
        sort: projectForm.value.sort,
        vipprice: projectForm.value.vipprice,
        duration: projectForm.value.duration,
        tags: projectForm.value.tags,
        info: projectForm.value.info
      };

      const response = await editProject(editParams);
      if (response.code === 1) {
        ElMessage.success(response.msg || "编辑成功");
        dialogVisible.value = false;
        loadData();
      } else {
        ElMessage.error(response.msg || "编辑失败");
      }
    }
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error("提交失败");
  } finally {
    submitLoading.value = false;
  }
};

// 加载数据
const loadData = async () => {
  loading.value = true;

  try {
    const params: ProjectListParams = {
      num: pagination.size.toString(),
      page: pagination.current.toString(),
      ...searchForm.value
    };

    // 尝试调用API
    try {
      const response = await getProjectList(params);

      if (response.code === 1) {
        tableData.value = response.data;
        pagination.total = response.data.length; // 假设API返回的总数
        return;
      } else {
        ElMessage.error(response.msg || "数据加载失败");
      }
    } catch (apiError) {
      console.error("API调用错误:", apiError);
      ElMessage.error("数据加载失败");
    }
  } catch (error) {
    console.error("数据加载错误:", error);
    ElMessage.error("数据加载失败");
  } finally {
    loading.value = false;
  }
};
// 状态切换
const handleSwitchChange = async (row: any) => {
  try {
    // 设置 loading 状态
    row._switchLoading = true;
    // 调用更新状态的 API，比如 switchProjectStatus
    const response = await switchProjectStatus(row.p_id);
    if (response.code == 1) {
      ElMessage.success("状态更新成功");
    } else {
      ElMessage.error("状态更新失败");
      row.t_status = row.t_status === 1 ? -1 : 1; // 回滚状态
    }
  } catch (error) {
    console.error("状态更新出错:", error);
    ElMessage.error("状态更新失败");
    row.t_status = row.t_status === 1 ? -1 : 1; // 回滚状态
  } finally {
    // 清除 loading
    row._switchLoading = false;
  }
  await loadData();
};
// 生命周期
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.member-management {
  height: 100%;
  background: #f5f7fa;
}

/* 项目详情抽屉样式 */
.banner-detail {
  padding: 0;
}

.banner-image-section {
  position: relative;
  margin-bottom: 20px;
}

.banner-main-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}

.image-error .el-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.banner-info-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.banner-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.banner-id {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.info-label .el-icon {
  font-size: 16px;
  color: #409eff;
}

.info-value {
  font-size: 14px;
  color: #303133;
  padding-left: 22px;
}

.link-text {
  color: #409eff;
  word-break: break-all;
}

.empty-text {
  color: #c0c4cc;
  font-style: italic;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid #ebeef5;
}

.demo-image__placeholder.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

/* 表格中的图片样式 */
.image-slot {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.image-slot:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.cursor-pointer {
  cursor: pointer;
}

.demo-image__placeholder .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

:deep(.el-image-viewer__canvas img) {
  width: 50% !important;
  height: auto;
  object-fit: cover;
}

/* 项目表单样式 */
.banner-form-container {
  padding: 0;
}

.banner-form {
  padding: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 上传组件样式 */
.upload-container {
  width: 100%;
}

.image-preview-card {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.preview-title {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.preview-image {
  border-radius: 0;
}

.banner-uploader {
  width: 100%;
}

:deep(.el-upload-dragger) {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  background: #fafcff;
  transition: all 0.3s;
}

:deep(.el-upload-dragger:hover) {
  border-color: #409eff;
  background: #ecf5ff;
}

.upload-area {
  padding: 40px 20px;
  text-align: center;
}

.upload-icon {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-text {
  color: #606266;
  font-size: 16px;
  margin-bottom: 8px;
}

.upload-text em {
  color: #409eff;
  font-style: normal;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

/* 抽屉样式优化 */
:deep(.project-drawer .el-drawer__body) {
  padding: 0 !important;
}

.member-management {
  height: 100%;
  background: #f5f7fa;
}

.member-detail {
  max-height: 500px;
  overflow-y: auto;
}

:deep(.el-descriptions) {
  --el-descriptions-item-bordered-label-background: #fafafa;
}

.dark :deep(.el-descriptions) {
  --el-descriptions-item-bordered-label-background: #262727;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

:deep(.el-dialog__body) {
  max-height: 810px;
  overflow-y: auto;
}
</style>
